<nz-layout style="height: 100%">
  <nz-header>
    <div class="logo"></div>
    <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
      <li nz-menu-item nzSelected>管理员管理</li>
      <li nz-menu-item>系统管理</li>
    </ul>
  </nz-header>
  <nz-layout>
    <nz-sider nzWidth="200px" nzTheme="light">
      <ul nz-menu nzMode="inline" class="sider-menu">
        <li nz-menu-item nzSelected>
          新增流程
        </li>
        <li nz-menu-item>
          表单管理
        </li>
        <li nz-menu-item>
          流程管理
        </li>
      </ul>
    </nz-sider>
    <nz-layout class="inner-layout">
      <nz-content>
        <div nz-row style="padding:10px;background-color: #F0F2F5">
          <nz-steps [nzCurrent]="currentStep">
            <nz-step nzTitle="基本信息"></nz-step>
            <nz-step nzTitle="表单设计"></nz-step>
            <nz-step nzTitle="审批流程"></nz-step>
            <nz-step *ngIf="hasHandleProcess" nzTitle="处理流程"></nz-step>
            <nz-step nzTitle="角色配置"></nz-step>
            <nz-step nzTitle="完成"></nz-step>
          </nz-steps>
        </div>

        <div nz-row class="steps-content">
          <ng-container *ngIf="currentStep === 0">
            <form nz-form [formGroup]="applyConfigForm">
              <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>申请名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="请输入申请名称">
                  <input nz-input formControlName="applyConfigName" required="">
                </nz-form-control>
              </nz-form-item>

              <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24">申请备注</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                  <textarea nz-input placeholder="输入申请介绍" formControlName="applyConfigDesc"
                            [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
                </nz-form-control>
              </nz-form-item>

              <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24">引导信息</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                  <input nz-input formControlName="applyConfigGuide">
                </nz-form-control>
              </nz-form-item>

              <nz-form-item>
                <nz-form-label [nzSm]="6">附件模板</nz-form-label>
                <nz-form-control [nzSm]="2">
                  <nz-upload nzAction="https://jsonplaceholder.typicode.com/posts/">
                    <button nz-button><i nz-icon nzType="upload"></i><span>点击上传</span></button>
                  </nz-upload>
                </nz-form-control>
              </nz-form-item>

              <nz-form-item>
                <nz-form-label [nzSm]="6">需要处理流程</nz-form-label>
                <nz-form-control [nzSm]="1">
                  <nz-switch [nzCheckedChildren]="checkedTemplate"
                             [(ngModel)]="hasHandleProcess"
                             [ngModelOptions]="{standalone: true}"
                             [nzUnCheckedChildren]="unCheckedTemplate"></nz-switch>
                  <ng-template #checkedTemplate><i nz-icon nzType="check"></i></ng-template>
                  <ng-template #unCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
                </nz-form-control>
              </nz-form-item>

              <ng-container *ngIf="hasHandleProcess">

                <nz-form-item>
                  <nz-form-label [nzSm]="6">处理时限</nz-form-label>
                  <nz-form-control [nzSm]="1">
                    <nz-input-group nzAddOnAfter="天">
                      <nz-input-number formControlName="applyConfigDisposeTime"
                                       [nzMin]="0" [nzStep]="1"></nz-input-number>
                    </nz-input-group>
                  </nz-form-control>

                  <nz-form-label [nzSm]="4">响应时限</nz-form-label>
                  <nz-form-control [nzSm]="1">
                    <nz-input-group nzAddOnAfter="天">
                      <nz-input-number formControlName="applyConfigResponseTime"
                                       [nzMin]="0" [nzStep]="1"></nz-input-number>
                    </nz-input-group>
                  </nz-form-control>

                  <nz-form-label [nzSm]="4">附件时效</nz-form-label>
                  <nz-form-control [nzSm]="1">
                    <nz-input-group nzAddOnAfter="天">
                      <nz-input-number formControlName="applyConfigAttachmentExpireTime"
                                       [nzMin]="0" [nzStep]="1"></nz-input-number>
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>

              </ng-container>
            </form>
          </ng-container>

          <ng-container *ngIf="currentStep===1">
            <form nz-form [formGroup]="formTemplateForm">
              <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>表单名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="请输入表单名称">
                  <input nz-input formControlName="templateName" required="">
                </nz-form-control>
              </nz-form-item>

              <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24">表单说明</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                  <textarea nz-input placeholder="输入申请介绍" formControlName="templateDesc"
                            [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
                </nz-form-control>
              </nz-form-item>

            </form>

            <nz-table #formTemplateTable nzBordered [nzData]="listOfData">
              <thead>
              <tr>
                <th nzWidth="30%">字段名称</th>
                <th>字段ID</th>
                <th>控件类型</th>
                <th>必填</th>
                <th>高级配置</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of formTemplateTable.data" class="editable-row">
                <td>
                  <input type="text" nz-input/>
                </td>
                <td><input type="text" nz-input/></td>
                <td><input type="text" nz-input/></td>
                <td>
                  <nz-switch
                    [nzCheckedChildren]="checkedTemplate"
                    [nzUnCheckedChildren]="unCheckedTemplate"
                  ></nz-switch>
                  <ng-template #checkedTemplate><i nz-icon nzType="check"></i></ng-template>
                  <ng-template #unCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
                </td>
                <td>
                  <button nz-button (click)="openDrawer()">
                    编辑<i nz-icon nzType="highlight" nzTheme="outline"></i>
                  </button>
                </td>
                <td>
                  <nz-button-group>
                    <button nz-button nzType="primary" style="margin: 0"><i nz-icon nzType="plus"></i></button>
                    <button nz-button nzType="primary"><i nz-icon nzType="minus"></i></button>
                  </nz-button-group>
                </td>
              </tr>
              </tbody>
            </nz-table>
          </ng-container>

          <ng-container *ngIf="currentStep===2">
            <form nz-form [formGroup]="approveProcessForm">
              <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>审批流程名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="请输入流程名称">
                  <input nz-input formControlName="processName" required="">
                </nz-form-control>
              </nz-form-item>

              <nz-form-item>
                <nz-form-label [nzSm]="6">流程ID</nz-form-label>
                <nz-form-control [nzSm]="14">
                  <input nz-input formControlName="processId" required="">
                </nz-form-control>
              </nz-form-item>

            </form>

            <div nz-row style="display: flex;justify-content: center">
              <button nz-button nzType="primary">去绘制<i nz-icon nzType="right"></i></button>
            </div>

          </ng-container>

          <ng-container *ngIf="hasHandleProcess&&currentStep===3">
            <form nz-form [formGroup]="disposeProcessForm">
              <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>处理流程名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="请输入流程名称">
                  <input nz-input formControlName="disposeProcessName" required="">
                </nz-form-control>
              </nz-form-item>

              <nz-form-item>
                <nz-form-label [nzSm]="6">处理流程ID</nz-form-label>
                <nz-form-control [nzSm]="14">
                  <input nz-input formControlName="disposeProcessId" required="">
                </nz-form-control>
              </nz-form-item>

            </form>

            <div nz-row style="display: flex;justify-content: center">
              <button nz-button nzType="primary">去绘制<i nz-icon nzType="right"></i></button>
            </div>

          </ng-container>

          <ng-container *ngIf="(!hasHandleProcess&&currentStep===3)||(hasHandleProcess&&currentStep===4)">
            <nz-skeleton></nz-skeleton>
          </ng-container>

          <ng-container *ngIf="(!hasHandleProcess&&currentStep===4)||(hasHandleProcess&&currentStep===5)">
            <nz-form-label [nzSm]="6">适用范围</nz-form-label>
            <nz-form-control [nzSm]="25">
              <nz-select nzPlaceHolder="选择适用范围">
                <nz-option nzValue="总部" nzLabel="总部"></nz-option>
                <nz-option nzValue="北京" nzLabel="北京"></nz-option>
                <nz-option nzValue="深圳" nzLabel="深圳"></nz-option>
              </nz-select>
            </nz-form-control>
          </ng-container>
        </div>

        <div nz-row class="steps-action">
          <button nz-button nzType="default" (click)="pre()" *ngIf="currentStep>0">
            <i nz-icon nzType="left"></i><span>上一步</span>
          </button>

          <nz-button-group>
            <button nz-button nzType="default" (click)="next()"
                    *ngIf="(!hasHandleProcess&&currentStep<4) || (hasHandleProcess&&currentStep<5)">
              <span>下一步</span><i nz-icon nzType="right"></i>
            </button>
            <button nz-button nzType="primary" (click)="submit()"
                    *ngIf="(!hasHandleProcess&&currentStep===4) || (hasHandleProcess&&currentStep===5)">
              <span>完成</span>
            </button>
          </nz-button-group>
        </div>

        <nz-drawer [nzVisible]="drawerVisible" (nzOnClose)="closeDrawer()"
          nzPlacement="right" nzTitle="Basic Drawer">
          <nz-skeleton></nz-skeleton>
        </nz-drawer>
      </nz-content>
    </nz-layout>
  </nz-layout>
</nz-layout>
